<div class="view"
  @dragenter.stop.prevent
  @dragover.stop.prevent="dragover"
  @dragleave.stop.prevent="dragleave"
  @dragend="dragend"
  @drop.stop.prevent="drop">

  <div class="view-title">
    文件
  </div>

  <div class="view-search">
    <i class="material-icons">search</i>
    <div class="input-group">
      <input v-model="searchInput" @keydown.esc="searchInput = ''">
      <div class="border-line"></div>
    </div>
    <div class="clear-btn" @click="searchInput = ''" v-show="searchInput" transition="opacity">
      <i class="material-icons">close</i>
    </div>
  </div>

  <div class="files list">
    <div class="list-item file clickable" v-for="file of files | filterBy searchInput in 'name' 'type'" @click="viewFile(file)" :class="{ bold: file.highlight }">
      <div class="list-item-indicator"></div>
      <div class="list-item-content">
        <div class="file-name">
          {{ file.name.split('.')[0] }}
        </div>
        <div class="file-type">
          {{ file.type }}
        </div>
      </div>
    </div>
    <template v-if="!searchInput">
      <div class="empty-hint" v-if="authorized">请拖拽文件至此窗口以添加文件, PDF以及图片文件可以直接预览</div>
      <div class="empty-hint" v-else>无文件</div>
    </template>
    <div class="empty-hint" v-else>无搜索结果</div>
  </div>

  <div class="dnd-mask" transition="opacity" v-show="dragging">
    <i class="dnd-icon material-icons">file_upload</i>
    <div class="dnd-hint">拖放以上传</div>
  </div>
</div>
